
{{template "base.html" .}}

{{define "content"}}

<!--操作按钮模板-->

<div class="layui-row layui-col-space15" style="padding: 30px">
  {{range $idx,$que := .data}}
  <div  class="layui-col-md3 Paper">
    <div class="layui-panel card" id="{{$que.Id}}"  onmouseenter="liMouseenter(this)" onmouseleave="liMouseleave(this)">
      {{if eq $que.Status "-1"}} <div class="paper-state" style="color:#FFB800 ">未发布</div> {{else}} <div class="paper-state" style="color:#5FB878">已发布</div>{{end}}
      <div class="title" >{{$que.Title}}#{{$que.Id}}</div>
      <div class="context">{{$que.Context}}</div>
      <span class="create">{{$que.CreatedBy}}</span>

    </div>
  </div>
  {{end}}
  <div class="layui-col-md3" id="add-question_title">
    <div class="layui-panel">
      <button title="添加试卷" type="button" class="layui-btn layui-btn-fluid" style="height: 100%"><i class="layui-icon layui-icon-addition" style="font-size: 80px"></i>  </button>
    </div>
  </div>
</div>
<script type="text/html" id="EditPaperHtml">
  <div class="EditPaper layui-anim layui-anim-upbit">
    <div class="send-Paper"><i class="layui-icon layui-icon-release">发布</i></div>
    <div class="update-Paper"><i class="layui-icon layui-icon-list">编辑</i></div>
    <div class="TakeDown-Paper"><i class="layui-icon layui-icon-about">下架</i></div>
  </div>
</script>
<script>
  $("#add-question_title").click(function (){
    layer.open({
      type: 2,
      title: '添加试卷',
      shadeClose: true,           //弹出框之外的地方是否可以点击
      offset: '10%',
      area: ['60%', '80%'],
      content: '/teacher/Paper/add'
    });
  })

  //编辑试卷
  $(".Paper").on('click',".update-Paper", function (e){

    $(location).attr("href","/teacher/Paper/edit/"+$(this).parents(".card").attr("id"))
  })
  //发布试卷
  $(".Paper").on('click',".send-Paper", function (e){
    var paperid = $(this).parents(".card").attr("id")
    $.ajax({
      method: "get",
      url: "/teacher/Paper/send/"+paperid+"/-1",
      success:function(res){
        if (res.code==0){
          layer.msg(res.msg,{icon: res.icon, time: 1000},function(){
            location.reload ()
          }); //提交成功后刷新页面
        }
      }
    })
  })
  //下架试卷
  $(".Paper").on('click',".TakeDown-Paper", function (e){
    var paperid = $(this).parents(".card").attr("id")
    $.ajax({
      method: "get",
      url: "/teacher/Paper/send/"+paperid+"/1",
      success:function(res){
        if (res.code==0){
          layer.msg(res.msg,{icon: res.icon, time: 1000},function(){
            location.reload ()
          }); //提交成功后刷新页面
        }
      }
    })
  })
  //显示删除按钮
  var removeBut="<div class=\"remove\" title=\"删除\"><i class=\"layui-icon layui-icon-close\" onclick=\"paperRemove(this)\"></i></div>"
  function liMouseenter(e){
    $(e).append(removeBut)
    $(e).append($("#EditPaperHtml").html())

  }
  function liMouseleave(e){
    $(e).find(".remove").remove()
    $(e).find(".EditPaper").remove()
  }
  $(".Paper").on('click',".remove", function (e){
    var Paper=$(e.target).parents(".Paper")
    layer.confirm('确定删除该试卷吗', {
      btn: ['确定', '取消'] //可以无限个按钮
    }, function(index, layero){
      $.ajax({
        method:"delete",
        url:"/teacher/Paper/del/"+Paper.find(".card").attr("id"),
        success:function(res){
          if(res.code=='0'){
            layer.msg("删除成功",{icon: 1, time: 500},function(){
              location.reload ()
            }); //提交成功后刷新页面
          }
          else
            window.location.replace("/404?msg="+res.msg);
        },
      })
    }, function(index){

    });
    return false
  })
</script>
<style>
  .remove{
    width: 30px;
    position: absolute;
    text-align: center;
    right: 0px;
    top: 0;
  }
  .remove:hover{
    cursor: pointer;
    background-color: #FF5722;
    color: #FFFFFF;
  }

  .layui-panel{
    height: 135px;
  }
  .layui-panel .title{
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
  }
  .layui-panel .context{
    padding: 0px 15px;
    overflow: hidden;
    height: 60px;
  }
  .create{
    padding: 0px 15px;
    color: #d2d2d2;
    float: right;
  }
  .card {
    position: relative;
    background-color: #FFF;
    border: none;
    border-radius: 6px;
    -webkit-transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1);
    transition: all 250ms cubic-bezier(.02, .01, .47, 1);
  }
  .EditPaper{
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: black;
    opacity: 0.75;
    height: 45%;
  }
  .EditPaper div{
    float: left;
    width: 33.3%;
    text-align: center;
    padding: 18px 0;
    white-space: nowrap;
  }
  .EditPaper div:hover{
    color: #1E9FFF;
  }
  .paper-state{
    position: absolute;
    left: 0;
    bottom: 5px;
    padding: 0px 8px;
  }
  .EditPaper i{
    font-weight: bold;
    font-size: 20px;
  }
  .card:hover {
    cursor: pointer;
    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
    transform: translate(0,-5px);
    transition-delay: 0s !important;
  }
  .box-shadow {
    -webkit-box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.15);
    box-shadow: 0 4px 16px rgba(48, 55, 66, 0.15);
  }
</style>
{{end}}
